<template>
    <div class="index-container">
        <el-card shadow="never" style="box-shadow: 0 4px 8px 0 rgba(7, 75, 156, 0.2);
    border-radius: 15px;
    padding: 10px;">
            <el-row justify="space-between" >
                <el-col :span="18" :xs="24">
                    <div class="banner-gray">
                        <img
                            class="avatar"
                            src="@/assets/images/avatar_1.gif"
                        />
                        <div>
                            <p>上午好，管理员 {{ userStore.user.username }}</p>
                            <!-- <p>上午好，管理员 test</p> -->
                            <p class="weather">
                               平台输入机房记录 {{bbuHomeRef.roomCountOfBefore}} 条，板卡记录 {{bbuHomeRef.actionCount}} 条
                            </p>
                        </div>
                    </div>
                </el-col>

                <el-col :span="6" :xs="24">
                    <div class="banner-message">
                        <el-statistic :value="bbuHomeRef.roomCountOfAfter" style="text-align: center; ">
                            <template #title>
                                <div class="content">
                                    <svg-icon
                                        a-icon="message"
                                        :a-size="20"
                                    />
                                    <span class="text">机房</span>
                                </div>
                            </template>
                        </el-statistic>

                        <el-statistic :value="bbuHomeRef.boardCountOfAfter" style="text-align: center; margin-left: 20px;">
                            <template #title>
                                <div class="flex items-center">
                                    <svg-icon
                                        a-icon="todolist"
                                        :a-size="20"
                                    />
                                    <span class="text">板卡</span>
                                </div>
                            </template>
                            <!-- <template #suffix>/100</template> -->
                        </el-statistic>

                        <el-statistic :value="bbuHomeRef.actionCount" style="text-align: center; margin-left: 20px;">
                            <template #title>
                                <div class="flex items-center">
                                    <svg-icon
                                    a-icon="project"
                                    :a-size="20"
                                    />
                                    <span class="text">方案</span>
                                </div>
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
            </el-row>
        </el-card>

        <!-- 数据卡片 -->
    <el-row :gutter="10" style="margin-top: 10px;">
      <el-col :xs="10" :sm="10" :lg="10">
        <div>
        <LiquidDataPannelIndex
        title="锚点系数_回局前"
        idPrefix="current"
        :anchor-appratus-room-amount="bbuHomeRef.roomCountOfBeforeAnchor"
        :appratus-room-amount="bbuHomeRef.roomCountOfBefore"
        :anchor-bbu-amount="bbuHomeRef.bbuCountOfBeforeAnchor"
        :total-bbu-amount="bbuHomeRef.bbuCountOfBefore"
        :g4-rate="bbuHomeRef.g4RateBefore"
        :g5-rate="bbuHomeRef.g5RateBefore"
        :g45-rate="bbuHomeRef.g45RateBefore"

        ></LiquidDataPannelIndex>
    </div>
      </el-col>

      <!--消息数-->
      <el-col :xs="4" :sm="4" :lg="4">
        <ActionDash :a-scheme-amount="bbuHomeRef.actionCount" :a-return-bbu-amount="bbuHomeRef.bbuCountOfBefore-bbuHomeRef.bbuCountOfAfter" />
      </el-col>

      <!--return bbu -->
      <el-col :xs="10" :sm="10" :lg="10">
        <div>
        <LiquidDataPannelIndex
        idPrefix="done"
        title="锚点系数_回局后"
        :anchor-appratus-room-amount="bbuHomeRef.roomCountOfAfterAnchor"
        :appratus-room-amount="bbuHomeRef.roomCountOfAfter"
        :anchor-bbu-amount="bbuHomeRef.bbuCountOfAfterAnchor"
        :total-bbu-amount="bbuHomeRef.bbuCountOfAfter"
        :g4-rate="bbuHomeRef.g4RateAfter"
        :g5-rate="bbuHomeRef.g5RateAfter"
        :g45-rate="bbuHomeRef.g45RateAfter"

        ></LiquidDataPannelIndex>
    </div>
      </el-col>      
    </el-row>

     <!-- Echarts 图表 -->
     <el-row :gutter="10" class="mt-3" style="margin-top: 20px;">
      <el-col :sm="24" :lg="8" class="mb-2">
        <BoardBarChart
          id="barChart"
          height="400px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
          :data="bbuHomeRef"
        />
      </el-col>

      <el-col :xs="24" :sm="12" :lg="8" class="mb-2">
        <ActionPieChart
          id="pieChart"
          height="400px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
          :data="bbuHomeRef.actionList"
        />
      </el-col>

      <el-col :xs="24" :sm="12" :lg="8" class="mb-2">
        <EffectRadarChart
          id="radarChart"
          height="400px"
          width="100%"
          class="bg-[var(--el-bg-color-overlay)]"
          :data="bbuHomeRef"
        />
      </el-col>
    </el-row>
        
    </div>
</template>
<script setup lang="ts">
import SvgIcon from '@/components/svg_icon/svg_icon_index.vue'
import LiquidDataPannelIndex from '@/views/home/liquid_data_pannel/liquid_data_pannel_index.vue'
import ActionDash from '@/views/home/action_dash/action_dash_index.vue';
import BoardBarChart from '@/views/home/board_bar_chart/board_bar_chart.vue';
import ActionPieChart from '@/views/home/action_pie_chart/action_pie_chart.vue';
import EffectRadarChart from '@/views/home/effect_radar_chart/effect_radar_chart.vue';
import { computed, onMounted, ref } from "vue";
import * as api from '@/api/bbu_return/return_home/return_home_api.ts'
import {TypeBbuHomeI} from '@/api/bbu_return/return_home/return_home_type.ts'
import { useUserStore } from "@/store/modules/user_store";
import { ElLoading, ElMessage, ElMessageBox, genFileId, vLoading } from "element-plus";

const userStore=useUserStore();


////#region defineXxx
//defineOptions({
//name:
//});

//const props=defineProps({
//propA:{
//type:String,
//required:true
//},
//propB:{
//type:Number,
//default:1
//},
//propC:{
//type:String as PropType<MyType>,
//required:true
//},
//});

//const emit = defineEmits<{
//event1:[para1:number,para2:string],
//event2:[para1:number,para2:string],
//}>();
////#endregion
const bbuHomeInit:TypeBbuHomeI={
    roomCountOfAfter:0,
    boardCountOfAfter:0,
    boardCountOfBefore:0,
    actionCount:0,
    roomCountOfBefore:0,
    roomCountOfBeforeAnchor:0,
    roomCountOfAfterAnchor:0,
    bbuCountOfBefore:0,
    bbuCountOfBeforeAnchor:0,
    bbuCountOfAfter:0,
    bbuCountOfAfterAnchor:0,
    boardCountListOfBefore:[0,0,0,0],
    boardCountListOfAfter:[0,0,0,0],
    boardRateListOfBefore:[0,0,0,0],
    boardRateListOfAfter:[0,0,0,0],
    actionList:[0,0,0,0],
    resourceListOfBefore:[0,0,0,0,0],
    resourceListOfAfter:[0,0,0,0,0],
    g4RateBefore:0,
    g5RateBefore:0,
    g45RateBefore:0,
    g4RateAfter:0,
    g5RateAfter:0,
    g45RateAfter:0,
}

const bbuHomeRef=ref<TypeBbuHomeI>(Object.assign({},bbuHomeInit));

const fullscreenLoadingRef = ref();

const openFullScreenLoading = () => {
    fullscreenLoadingRef.value= ElLoading.service({
    lock: true,
    text: '处理中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
//   setTimeout(() => {
//     loading.close()
//   }, 2000)
}

const closeFullScreenLoading=()=>{
    fullscreenLoadingRef.value.close();
}


onMounted(async ()=>{
    console.log('in bbu home mounted');
    openFullScreenLoading();
    const respone=await api.getBbuHome();
    bbuHomeRef.value=respone.data;
    closeFullScreenLoading();
})

const n4gRateBeforeRef=ref(0.4);
</script>
<style lang="scss" scoped>
.index-container {
    position: relative;
    padding: 24px;
    .banner-gray{
        display: flex;
        height: 100%;
        align-items: center;
        .weather{
            font-size: 12px;
            color:#aaa;
            margin-top: 20px;
        }
    }
    .avatar{
        width: 90px;
        height: 90px;
        margin-right: 15px;
        border-radius: 50% 50%;
    }
    .banner-message{
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: space-around;
        .content{
            display: flex;

        }
        .text{
            font-size: 16px;
            margin-left: 4px;
        }
    }
    .action-header{
        display: flex;
        align-items: center;
        justify-content: space-between
    }

}
</style>
